<template>
	<view class="contont">
		<view class="rgba-back">
			<!-- 头部导航 -->
			<top-tabtar tabTitle="个人作品"  @backClick="backClick">
				<view class="iconfont" slot="tab-right" style="font-size: 48rpx;">&#xe65e;</view>
			</top-tabtar>
			<!-- 主体内容 -->
			<view class="main">
				<view class="atten-img-box">
					<view class="img-box">
						<image src="../../static/login/logo.png" class="img"></image>
					</view>
					<view class="attention">关注Ta</view>
				</view>
				<view class="user-box">
					<view class="item-name-text-inoc">
						<view class="user-name">宫崎骏设计师</view>
						<view class="item-gender-age">
							<view class="gender">女</view>
							<view class="gender age">24</view>
						</view>
						<view class="describe">这是一段关于作者的描述一段</view>
						<view class="pay-bean-production">
							<view>
								<text class="item-num">250</text><text class="item-text">关注</text>
							</view>
							<view>
								<text class="item-num">1,452</text><text class="item-text">粉丝</text>
							</view>
							<view>
								<text class="item-num">250</text><text class="item-text">作品</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 所有作品 -->
				<view>
					<view class="all-title">所有作品<text>（</text><text class="all-num">25</text><text>）</text></view>
				</view>
				<view class="all-product">
					<view class="all-img-list" v-for="(item,index) in productList" :key="item.id">
						<view class="all-img-box"><image :src="item.url" mode="aspectFill"></image></view>
						<view class="text">{{ item.text }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topTabtar from '@/components/top-tabbar.vue'
	export default {
		components: { topTabtar },
		data() {
			return {
				productList: [
					{ id: 1, text: '会员VR之水果之恋', url: '/static/my/product_a.jpg'},
					{ id: 2, text: '会员VR之水果之恋', url: '/static/my/product_b.jpg'},
					{ id: 3, text: '会员VR之水果之恋', url: '/static/my/product_c.jpg'},
					{ id: 4, text: '会员VR之水果之恋', url: '/static/my/product_d.jpg'},
					{ id: 5, text: '会员VR之水果之恋', url: '/static/my/product_e.jpg'},
					{ id: 6, text: '会员VR之水果之恋', url: '/static/my/product_f.jpg'},
				],
				screenHeight: uni.getSystemInfoSync().screenHeight, // 屏幕高度
				screenHeightTab: uni.getSystemInfoSync().screenHeight*0.81752 // 屏幕高度
			}
		},
		onShow() {
			console.log('屏幕高度:',this.screenHeightTab)
		},
		methods: {
			// 返回上一页
			backClick() {
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contont{
		
		.rgba-back{
			width: 100%;
			height: 360rpx;
			background: url("~@/static/my/works_b.jpeg");
			background-repeat:no-repeat; 
			background-size:100% 100%;
			-moz-background-size:100% 100%;
			.main{
				margin-top: 120rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx 20rpx 0rpx 0;
				padding: 0 26rpx 25rpx 26rpx;
				.atten-img-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 8rpx 17rpx 25rpx;
					.img-box{
						width: 138rpx;
						height: 135rpx;
						border-radius: 50%;
						margin-top: -68rpx;
						.img{
							width: 100%;
							height: 100%;
						}
					}
					.attention{
						display: inline-block;
						padding: 8rpx 24rpx;
						background: linear-gradient(90deg, #B83DF1, #852CAE);
						border-radius: 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
				.user-box{
					border-bottom: 1px solid #F2F2F2;
					.item-name-text-inoc{
						padding: 0 14rpx;
						.user-name{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 600;
							color: #333333;
						}
						.item-gender-age{
							display: flex;
							align-items: center;
							margin: 20rpx 0;
							.gender{
								display:inline-block;
								padding: 5rpx 30rpx;
								background: rgba(91, 33, 119, 0.3);
								border-radius: 20rpx;
								font-size: 20rpx;
								font-family: PingFang SC;
								color: #5B2177;
							}
							.age{
								margin-left: 14rpx;
							}
						}
						.describe{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
						.pay-bean-production{
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 37rpx 0 46rpx 0;
							.item-num{
								font-size: 36rpx;
								font-family: PingFang SC;
								font-weight: 600;
								color: #333333;
								margin-right: 17rpx;
							}
							.item-text{
								font-size: 24rpx;
								font-family: PingFang SC;
								color: #666666;
							}
						}
					}
				}
				// 所有作品
				.all-title{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333333;
					padding: 30rpx 0;
					.all-num{
						color: #FF7D36;
					}
				}
				.all-product{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.all-img-list:nth-child(3n) {
					 margin-right: 0 !important;
					}
					.all-img-list{
						width: 220rpx;
						margin: 0 19rpx 33rpx 0;
						.all-img-box{
							width: 220rpx;
							height: 220rpx;
							border-radius: 10rpx;
							image{
								width: 100%;
								height: 100%;
								border-radius: 10rpx;
							}
						}
						.text{
							font-size: 26rpx;
							font-weight: 400;
							color: #000000;
							margin-top: 20rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>
